<script>

  var tarea;
  var columna;
  var horas;



    function disable()
    {
        var spinner1 = $( ".SP1" ).spinner();
        spinner1.spinner("disable");

        spinner1 = $( ".SP" ).spinner();
        spinner1.spinner("enable");
    }
    function updateHora()
    {
          var formdata=null;
            formdata =
            {
                "tarea" : tarea,
                "horas" : horas
            }

            var url = '<%= request.protocol + request.host_with_port %>/tarea_participantes/1/updateHoras' ;
            $.ajax({
                url: url,
                data: formdata,
                cache: false,
                contentType: 'multipart/form-data',
                processData: true,
                type: 'POST',
                success: function(data){

                    if(data == "true")
                    {}// alert("Nodo creado con éxito");
                    else alert("No se pudieron actualizar las horas");
                }
            });
     }

  function updateEstado()
  {
      var formdata=null;
      formdata =
      {
          "tarea" : tarea,
          "columna" : columna
      }

      var url = '<%= request.protocol + request.host_with_port %>/tarea_participantes/1/updateEstado' ;
      $.ajax({
          url: url,
          data: formdata,
          cache: false,
          contentType: 'multipart/form-data',
          processData: true,
          type: 'POST',
          success: function(data){

              if(data == "true")
              {}// alert("Nodo creado con éxito");
              else alert("No se pudo actualizar el estado");
          }
      });

  }

    jQuery(document).ready(function() { jQuery.noConflict();
        disable();

        var spinner = $( ".SP" ).spinner();

       /* $('.ui-spinner-button').click(function() {
            var input=$(this).siblings('input');
            tarea=input[0].getAttribute("id").substr(2);
            horas=input[0].getAttribute("aria-valuenow");
            alert(tarea+" "+horas)      ;
            updateHora();

        });   */
       /* $('.SP').change(function(event) {
            //do stuff with the "event" object as the object that called the method
            alert("Cambio");
            });

        $('.ui-spinner-button').click(function() {
            var input=$(this).siblings('input');
            tarea=input[0].getAttribute("id").substr(2);
            horas=input[0].getAttribute("aria-valuenow");
            alert(tarea+" "+horas)      ;
            updateHora();

        });   */
        $("input").change( function() {
            // check input ($(this).val()) for validity here
            tarea=$(this).attr('id').substr(2);
            horas=$(this).val();
            //alert(tarea+" "+horas);
            updateHora();
        });


        $('#col1 input').spinner({min: 0, stop: function(event, ui) {
            $(this).change();
        }})
                .parent()
                .find('.ui-spinner-up').addClass('ui-corner-tl').end()
                .find('.ui-spinner-down').addClass('ui-corner-bl');

        $('#col2 input').spinner({min: 0, stop: function(event, ui) {
            $(this).change();
        }})
                .parent()
                .find('.ui-spinner-up').addClass('ui-corner-tl').end()
                .find('.ui-spinner-down').addClass('ui-corner-bl');

        $('#col3 input').spinner({min: 0, stop: function(event, ui) {
            $(this).change();
        }})
                .parent()
                .find('.ui-spinner-up').addClass('ui-corner-tl').end()
                .find('.ui-spinner-down').addClass('ui-corner-bl');


    });
</script>


<style>
    .ui-spinner-input{margin: 2px 8px 2px 4px; font-size: 10px;}
    .ui-spinner input{font-size: 10px;}
</style>

<div class="contents sgw_new_grid proyectoverview" id="ext-gen33" style="padding: 10px;" xmlns="http://www.w3.org/1999/html">
<div id="dhtmlgoodies_dragDropContainer">

  <div id="dhtmlgoodies_listOfItems">
  <div class="thetaskcontainer" id="col1">
    <p><%=t('layouts.WS_usuarios.iniciar')%></p>
    <ul id="allItems">
      <% @tareas.each do |tarea| %>
          <%if tarea.columna==1%>
              <li id= "node<%=tarea.id%>" groupId="box<%=tarea.id%>">
                <%if tarea.estado==1%>
                    <div class="onetask">
                <%end%>
                <%if tarea.estado==2%>
                    <div class="onetask">
                <%end%>
                <%if tarea.estado==3%>
                    <div class="onetask lateother ">
                <%end%>
                <%if tarea.estado==4%>
                    <div class="onetask lateme">
                <%end%>
                <div class="c-input title" id="topbottom">
                  <%=tarea.nombre %><span title="horas"><%=tarea.duracion%> <%=t('layouts.WS_usuarios.horas')%></span>
                    <!--div class="c-field c-topbottom" style="left: 10px"><input value="0"/></div-->

                    <br>
                    <div class="taskprogcont">
                      <div class="taskprogbar">
                        <div class="taskprogressbar">
                          <div style="width: 0%;"></div>
                        </div> &nbsp; 0%
                      </div>
                    </div>

                </div>
                <div class="horizontal" style="float: right;visibility: visible;"><span style="color: #aaaaaa; font-size: 11px; margin-left: 5px;">hrs worked: </span><span class="size1"><input class="SP1" id="sp<%=tarea.id%>" value="<%=tarea.horas_ejecutadas%>" name="input<%=tarea.id%>" /></span>  </div>
                <div class="clear"></div>
                <div class="process">
                  <img src="/images/<%=tarea.proceso.proyecto.filename %>" style="width: 32px; height: 32px; " >
                  <img src="/images/<%=tarea.proceso.filename %>" style="width: 32px; height: 32px; " >
                  <div class="fleft">
                    <div class="processname"><%=tarea.proceso.nombre %></div>
                    <div class="projectname"><%=tarea.proceso.proyecto.nombre %></div>
                  </div>

                </div>
                <div class="clear"></div>
                </div>
              </li>
          <%end%>
      <%end%>
     </ul>
  </div>
</div>
  <div id="dhtmlgoodies_mainContainer">

  <!-- ONE <UL> for each "room" -->
  <div class="thetaskcontainer" id="col2">
    <p><%=t('layouts.WS_usuarios.proceso')%></p>
    <ul id="box1">
      <% @tareas.each do |tarea| %>
          <%if tarea.columna==2%>
              <li id= "node<%=tarea.id%>" groupId="box<%=tarea.id%>">
                <%if tarea.estado==5%>
                    <div class="onetask">
                <%end%>
                <%if tarea.estado==6%>
                    <div class="onetask lateother ">
                <%end%>
                <%if tarea.estado==7%>
                    <div class="onetask lateme">
                <%end%>
                <div class="c-input title" id="topbottom" style="width: 271px">
                  <%=tarea.nombre %><span title="horas"><%=tarea.duracion%> <%=t('layouts.WS_usuarios.horas')%></span>
                  <!--div class="c-field c-topbottom" style="left: 10px"><input value="0"/></div-->

                  <br>
                  <div class="taskprogcont">
                    <div class="taskprogbar">
                      <div class="taskprogressbar">
                        <div style="width: 40%;"></div>
                      </div> &nbsp; 40%
                    </div>
                  </div>

                </div>
                <div class="horizontal" style="float: right;visibility: visible;"><span class="size1">
                  <span style="color: #aaaaaa; font-size: 11px; margin-left: 5px;">hrs worked: </span><input class="SP" id="sp<%=tarea.id%>" value="<%=tarea.horas_ejecutadas%>"  /></span> </div>
                <div class="clear"></div>
                <div class="process">
                  <img src="/images/<%=tarea.proceso.proyecto.filename %>" style="width: 32px; height: 32px; " >
                  <img src="/images/<%=tarea.proceso.filename %>" style="width: 32px; height: 32px; " >
                  <div class="fleft">
                    <div class="processname"><%=tarea.proceso.nombre %></div>
                    <div class="projectname"><%=tarea.proceso.proyecto.nombre %></div>
                  </div>

                </div>
                <div class="clear"></div>
                </div>
              </li>
          <%end%>
      <%end%>
    </ul>
  </div>

  <div class="thetaskcontainer" id="col3">
    <p><%=t('layouts.WS_usuarios.terminadas')%></p>
    <ul id="box2">
      <% @tareas.each do |tarea| %>
          <%if tarea.columna==3%>
              <li id= "node<%=tarea.id%>" groupId="box<%=tarea.id%>">
                <%if tarea.estado==8%>
                    <div class="onetask">
                <%end%>
                <%if tarea.estado==9%>
                    <div class="onetask lateother ">
                <%end%>
                <%if tarea.estado==10%>
                    <div class="onetask lateme">
                <%end%>
                <div class="title"><%=tarea.nombre %><span title="horas"><%=tarea.duracion%> <%=t('layouts.WS_usuarios.horas')%></span><br>
                  <div class="taskprogcont">
                    <div class="taskprogbar">
                      <div class="taskprogressbar">
                        <div style="width: 100%;"></div>
                      </div> &nbsp; 100%
                    </div>
                  </div>
                </div>
                <div class="horizontal" style="float: right;visibility: visible;"><span style="color: #aaaaaa; font-size: 11px; margin-left: 5px;">hrs worked: </span><span class="size1"><input class="SP1" id="sp<%=tarea.id%>" value="<%=tarea.horas_ejecutadas%>" name="1" /></span> </div>
                <div class="clear"></div>
                <div class="process">
                  <img src="/images/<%=tarea.proceso.proyecto.filename %>" style="width: 32px; height: 32px; " >
                  <img src="/images/<%=tarea.proceso.filename %>" style="width: 32px; height: 32px; " >
                  <div class="fleft">
                    <div class="processname"><%=tarea.proceso.nombre %></div>
                    <div class="projectname"><%=tarea.proceso.proyecto.nombre %></div>
                  </div>

                </div>
                <div class="clear"></div>
                </div>
              </li>
          <%end%>
      <%end%>
    </ul>
  </div>



</div>



</div>

<ul id="dragContent"></ul>
<div id="dragDropIndicator"><img src="/images/insert.gif"></div>
<div id="saveContent"></div>


<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js"></script>

<style>
    .legendgraphs{color:rgb(204, 204, 204); background-color: rgb(37, 37, 37); padding: 10px; float: left; margin: 20px 0 5px 0; width: 320px;}
    .legendgraphs .titulo{text-align: center; font-weight: bold;}
    .legendgraphs .labels{float:left; font-size: 12px; }
    .legendgraphs .icons{width: 12px; height: 12px; float:left; font-size: 12px; float: left; margin-right: 10px;}
    .legendbottom{border: solid 2px rgb(37, 37, 37); padding: 10px; float: left; min-width: 316px;}

    .agraph{width:338px;height:169px;}
    .agraphb{width:400px;height:400px;}
</style>

<div class="legendgraphs">
  <div class="titulo">
    ESTADO DE MIS ACTIVIDADES
  </div>
</div>
<div class="clear"></div>
<div class="legendbottom" style="width:316px">
  <div id="legend3"></div>
</div>
<div class="clear"></div>


    <script>
        require([
            // Require the basic chart class
            "dojox/charting/Chart",

            // Require the theme of our choosing
            "dojox/charting/themes/Electric",

            // Charting plugins:

            //  We want to plot a Pie chart
            "dojox/charting/plot2d/StackedColumns",

            "dojox/charting/plot2d/Markers",

            //  We'll use default x/y axes
            "dojox/charting/axis2d/Default",

            "dojox/charting/widget/Legend",

            // Wait until the DOM is ready
            "dojo/domReady!"
        ], function(Chart, theme, StackedColumns, Legend) {


            // Create the chart within it's "holding" node
            var chart = new Chart("chartNode3");

            // Set the theme
            chart.setTheme(theme);

            chart.addPlot("default", {
                type: StackedColumns,
                markers: true,
                gap: 45
            });

            // Add the only/default plot
            chart.addAxis("x", {
                fixLower: "minor",
                fixUpper: "minor",
                natural: true,
                labels: [{value: 1, text: "planeado"}, {value: 2, text: "real"}]
            }).addAxis("y", {
                        vertical: true,
                        fixLower: "major",
                        fixUpper: "major",
                        includeZero: true
                    });
            chart.addSeries("Por iniciar", [<%= @cant_proceso_poriniciar_plan %>, <%= @cant_proceso_poriniciar_real %>]);
            chart.addSeries("En progreso", [<%= @cant_proceso_enprogreso_plan %>, <%= @cant_proceso_enprogreso_real %>]);
            chart.addSeries("Terminadas", [<%= @cant_proceso_terminadas_plan %>, <%= @cant_proceso_terminadas_real %>]);

            // Render the chart!
            chart.render();


            var legend = new dojox.charting.widget.Legend({chart: chart, horizontal: true}, "legend3");

        });
    </script>
    <div id="chartNode3" class="agraph"></div>
    <div class="clear"></div>



 <!--
<link rel="stylesheet" href="/assets/demo.css">
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="async: true, gfxRenderer: 'svg,silverlight,vml,canvas'"></script>
<script src="/assets/src_dojo.js"></script>

  <div>
    <p class="controls"  >
      <select id="themeChooser" >
        <optgroup label="Gradients">
          <option value="Julie" >Julie</option>
          <option value="ThreeD">ThreeD</option>
          <option value="Chris">Chris</option>
          <option value="Tom">Tom</option>
          <option value="Claro">Claro</option>
          <option value="PrimaryColors">PrimaryColors</option>
          <option value="Electric" selected="selected">Electric</option>
          <option value="Charged">Charged</option>
          <option value="Renkoo">Renkoo</option>
        </optgroup>
        <optgroup label="Classic">
          <option value="Adobebricks">Adobebricks</option>
          <option value="Algae">Algae</option>
          <option value="Bahamation">Bahamation</option>
          <option value="BlueDusk">BlueDusk</option>
          <option value="CubanShirts">CubanShirts</option>
          <option value="Desert">Desert</option>
          <option value="Distinctive">Distinctive</option>
          <option value="Dollar">Dollar</option>
          <option value="Grasshopper">Grasshopper</option>
          <option value="Grasslands">Grasslands</option>
          <option value="GreySkies">GreySkies</option>
          <option value="Harmony">Harmony</option>
          <option value="IndigoNation">IndigoNation</option>
          <option value="Ireland">Ireland</option>
          <option value="MiamiNice">MiamiNice</option>
          <option value="Midwest">Midwest</option>
          <option value="Minty">Minty</option>
          <option value="PurpleRain">PurpleRain</option>
          <option value="RoyalPurples">RoyalPurples</option>
          <option value="SageToLime">SageToLime</option>
          <option value="Shrooms">Shrooms</option>
          <option value="Tufte">Tufte</option>
          <option value="WatersEdge">WatersEdge</option>
          <option value="Wetland">Wetland</option>
        </optgroup>
        <optgroup label="PlotKit">
          <option value="PlotKit.blue">PlotKit.blue</option>
          <option value="PlotKit.cyan">PlotKit.cyan</option>
          <option value="PlotKit.green">PlotKit.green</option>
          <option value="PlotKit.orange">PlotKit.orange</option>
          <option value="PlotKit.purple">PlotKit.purple</option>
          <option value="PlotKit.red">PlotKit.red</option>
        </optgroup>
      </select>
      &nbsp;&nbsp;&nbsp;
      <input id="pageStyleChooser" type="checkbox" checked="checked" value="">
    </p>
    <div id="chartContainer">
      <div class="chart" id="bars"></div>
      <div class="chart" id="lines"></div>
      <div class="chart" id="pieFan"></div>
      <div class="chart" id="bubbles"></div>
      <div class="chart" id="area"></div>
      <div class="chart" id="pieLin"></div>
      <div class="chart" id="columns"></div>
      <div class="chart" id="candle"></div>
      <div class="chart" id="ohlc"></div>
      <div class="chart" id="scatter"></div>
    </div>

  </div>              -->

</div>

